<template>
  <el-row type="flex" justify="center">
    <el-col :span="19">
      <div class="content">
        <div class="logo">
          <img src="../assets/logo.png" width="35" height="35">
        </div>
        <div class="menu">
          <li>
            <router-link :to="{ name: 'home'}">首页</router-link>
          </li>
          <li v-for="item in data.slice(0,5)" :key="item.id">
            <router-link :to="{ name: 'channel', params: {id: item.id}}">{{ item.name }}
            </router-link>
          </li>
        </div>
        <div class="user">
          <!--情况一：正在登录中-->
          <span v-if="isLogin">loading...</span>
          <!--情况二：已登录  template不会生成任何dom元素 -->
          <template v-else-if="loginData ? true: false">
            <router-link :to="{name: 'personal'}">{{loginData.username}}</router-link>
            <router-link :to="{name: 'setting'}">设置</router-link>
            <a href="" @click.prevent="logout">安全退出</a>
          </template>
          <!--情况三：未登录-->
          <template v-else>
            <router-link :to="{name: 'login'}">登录</router-link>
            <span style="margin: 0 5px">/</span>
            <router-link :to="{name:'register'}">注册</router-link>
          </template>
          <!--                    channel.total loginUser.username-->
          <!--                    {{data.slice(0,1)}}{{isLoading}}-->
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
// import {getChannelList} from '../services/newsServices'
import {mapState} from 'vuex'

export default {
  name: "Header",
  async created() {
    // 分发action，最先获取的可以放在 main.js中
    // this.$store.dispatch('channels/getChannels')

    // const resp = await getChannelList();
    // this.channels = resp.slice(0, 5); // 取5个频道
  },

  // 获取仓库数据，一般使用计算属性, 引入所有 module
  computed: {
    ...mapState('channels',['data', 'isLoading']),
    ...mapState('loginUser',{
      loginData: 'data',
      isLogin: 'isLoading'
    })
  },

  // 还可以这样引入,引入单module
  // computed: mapState('channels',['data','isLoading']),

  methods: {
    logout(){
      this.$store.dispatch('loginUser/logout')
      this.$router.push({name: 'login'})
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #C0C4CC;
}

.content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 60px;
}

.logo {
  width: 200px;
  display: flex;
  align-items: center;
}

.menu {
  display: flex;
}

.menu li {
  margin: 0 16px;
}

.menu li a.router-link-exact-active {
  color: #409EFF;
}

.menu li a:hover {
  color: #409EFF;
  cursor: pointer;
}

.user {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.user a{
  padding: 0 8px;
}


</style>
